<script setup>
import {
  Medal,
  Tools,
  User,
  Goods,
  Reading,
  Refresh
} from '@element-plus/icons-vue'
import { useLayoutStore } from '@/stores'

const layoutStore = useLayoutStore()
const isCollapse = computed(() => layoutStore.isCollapse)
const route = useRoute()
const activeMenu = computed(() => route.meta.activeMenu ?? route.path)

const menus = [
  {
    path: '/user',
    icon: User,
    title: '用户',
    chidren: [
      {
        path: '/user/list',
        title: '用户列表'
      },
      {
        path: '/user/pay-record',
        title: '充值记录'
      }
    ]
  },
  {
    path: '/device',
    icon: Tools,
    title: '设备',
    chidren: [
      {
        path: '/device/list',
        title: '设备列表'
      },
      {
        path: '/device/group',
        title: '设备分组'
      }
    ]
  },
  {
    path: '/version',
    icon: Refresh,
    title: '版本',
    chidren: [
      {
        path: '/version/app',
        title: '应用版本'
      },
      {
        path: '/version/ai',
        title: 'AI算法版本'
      }
    ]
  },
  {
    path: '/games/list',
    icon: Medal,
    title: '赛事',
    chidren: []
  },
  {
    path: '/material',
    icon: Goods,
    title: '素材',
    chidren: [
      {
        path: '/material/score-frame',
        title: '比分框素材'
      },
      {
        path: '/material/users',
        title: '用户素材'
      }
    ]
  },
  {
    path: '/log',
    icon: Reading,
    title: '日志',
    chidren: [
      {
        path: '/log/logging',
        title: '登录日志'
      },
      {
        path: '/log/operation',
        title: '操作日志'
      },
      {
        path: '/log/device',
        title: '设备日志'
      }
    ]
  }
]
</script>

<template>
  <aside class="h-screen pt-16">
    <div class="h-full overflow-auto">
      <el-menu
        class="min-h-full"
        :default-active="activeMenu"
        :collapse="isCollapse"
        router
        unique-opened
      >
        <template v-for="menu in menus" :key="menu.title + menu.path">
          <el-sub-menu v-if="menu.chidren?.length" :index="menu.path">
            <template #title>
              <el-icon v-if="menu.icon"><component :is="menu.icon" /></el-icon>
              <span>{{ menu.title }}</span>
            </template>

            <el-menu-item
              v-for="submenu in menu.chidren"
              :key="submenu.title + submenu.path"
              :index="submenu.path"
            >
              <el-icon v-if="submenu.icon">
                <component :is="submenu.icon" />
              </el-icon>
              <template #title>{{ submenu.title }} </template>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item v-else :index="menu.path">
            <el-icon v-if="menu.icon">
              <component :is="menu.icon" />
            </el-icon>
            <template #title>{{ menu.title }} </template>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </aside>
</template>

<style scoped>
:deep(.el-menu-item.is-active) {
  background-color: var(--el-menu-hover-bg-color);
}

.el-menu:not(.el-menu--collapse) {
  width: 240px;
}
</style>
